<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <%--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js" async></script>--%>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/AttractionCss/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/AttractionCss/font-awesome.css" type="text/css">


    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

<%@include file="../common/nav_top.jsp"%>
<div class="container-fluid">
    <div class="row">
        <div class="container"
             style="background-color: #F7F9F7;padding-top: 50px;padding-bottom: 50px;margin-top: 50px;margin-bottom:50px;width: 800px">
            <div class="col-md-6 col-md-offset-3">
                <%--<form  class=""  >--%>
                <div class="row" style="margin-bottom: 20px">
                    <div class="col-xs-7">
                        <input type="hidden" value="${userTable.id}" id="userId">
                        <div class="form-group has-feedback">
                            <label for="idcode-btn">现居地址</label>
                            <div class="input-group">
										<span class="input-group-addon"><span
                                                class="glyphicon glyphicon-home"></span></span>
                                <input id="address-btn" name="address" class="form-control" placeholder="请输入现居地址"
                                       type="text"/>
                            </div>
                            <span style="color:red;display: none;" class="tips"></span>
                            <span style="display: none;"
                                  class="glyphicon glyphicon-remove form-control-feedback"></span>
                            <span style="display: none;"
                                  class="glyphicon glyphicon-ok form-control-feedback"></span>
                        </div>
                    </div>
                    <div class="col-xs-5" style="padding-top: 30px">
                        <div id="idcode" style="background: transparent;"></div>
                    </div>
                </div>

                <div class="form-group has-feedback" style="margin-bottom: 20px">
                    <label for="phoneNumber">手机号码</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
                        <input id="phoneNumber" name="phone" onblur="checkPhone(this)" class="form-control"
                               placeholder="请输入手机号码" maxlength="11"
                               type="text"/>
                        <span id="phones">${errorMaps.phone}</span>
                        <input style="display:none" value="false" id="phoneFlag"/>
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;"
                          class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>

                <div class="form-group has-feedback" style="margin-bottom: 20px">
                    <label for="phoneNumber">邮箱</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
                        <input id="email" name="email" onblur="checkemail(this)" class="form-control"
                               placeholder="请输入邮箱"
                               type="text"/>
                        <span id="emails">${errorMaps.email}</span>
                        <input style="display:none" value="false" id="emailFlag"/>
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;"
                          class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>

                <div class="row" style="margin-bottom: 20px">
                    <div class="col-xs-7">
                        <div class="form-group has-feedback">
                            <label for="idcode-btn">校验码</label>
                            <div class="input-group">
										<span class="input-group-addon"><span
                                                class="glyphicon glyphicon-qrcode"></span></span>
                                <input id="idcode-btn" onblur="checkcode(this)" class="form-control"
                                       placeholder="请输入校验码" maxlength="6"
                                       type="text"/>
                            </div>
                            <span style="color:red;display: none;" class="tips"></span>
                            <span style="display: none;"
                                  class="glyphicon glyphicon-remove form-control-feedback"></span>
                            <span style="display: none;"
                                  class="glyphicon glyphicon-ok form-control-feedback"></span>
                        </div>
                    </div>
                    <div class="col-xs-5 text-center" style="padding-top: 26px">
                        <button type="button" id="loadingButton" class="btn btn-primary"
                                autocomplete="off" onclick="sendcode()">获取校验码
                        </button>
                        <span id="codes">${errorMaps.code}</span>
                        <input style="display:none" value="false" id="codeFlag"/>
                    </div>
                </div>


                <div class="form-group has-feedback" style="margin-bottom: 20px">
                    <label for="phoneNumber">个人简介</label>
                    <div class="input-group">
                        <input id="profile" name="phone" class="form-control" placeholder="请输入个人简介"
                               type="text"/>
                    </div>
                </div>

                <div id="addCommodityIndex" style="margin: 20px">
                    <!--input-group start-->
                    <div class="input-group row">
                        <div class="col-sm-3" style="width: 20px">
                            <label>上传头像</label>
                        </div>
                        <div class="col-md-4 image">
                            <form method="post" enctype="multipart/form-data" id="imgform">
                                <input type="file" name="myfile" id="myfile">

                            </form>
                            <!-- 图片放置位置 -->
                            <div id="preview" style="width:  100px;height:100px;border:2px solid white">


                            </div>
                            <input style="display: none" id="phtot_url" value="">
                            <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                        </div>
                    </div>
                </div>

                <div id="addCommodityIndex" style="margin: 20px">
                    <!--input-group start-->
                    <div class="input-group row">
                        <div class="col-sm-3" style="width: 20px">
                            <label>上传身份证</label>
                        </div>
                        <div class="col-md-4 image">
                            <form method="post" enctype="multipart/form-data" id="imgform2">
                                <input type="file" name="myfile2" id="myfile2">
                            </form>
                            <!-- 图片放置位置 -->
                            <div id="preview2" style="width:  100px;height:100px;border:2px solid white">

                            </div>

                        </div>

                        <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                    </div>
                    <span id="yanzheng">${errorMaps.yanzheng}</span>
                    <input style="display:none" value="false" id="yanzhengFlag"/>
                </div>
            </div>


            <div class="form-group" style="margin-bottom: 20px">
                <input class="form-control btn btn-primary" id="submit"
                       value="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" onclick="insertm()" type="submit">
            </div>

            <div class="form-group" style="margin-bottom: 20px">
                <input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
            </div>
            <%--</form>--%>
        </div>
    </div>
</div>
</div>


<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse fixed-bottom" role="navigation">
            <div class="container-fluid" style="font-size: 13px">
                <div class="row">
                    <ul class="nav navbar-nav">
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 150px">
                                <h4>悠&nbsp;U旅行</h4>
                                <p>悠&nbsp;U是一个新方式的<span style="color: bisque"> "旅行交友"</span> 的网站,<br>
                                    旨在帮助旅行者计划和结伴游玩,<br>
                                    可以提供业余的引路人带给旅行者更好的 <span style="color: bisque"> "游玩体验"</span><br>
                                    提供一定的旅行日记,打造 <span style="color: bisque">"新方式旅行交友"</span><br>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                <h4 style="text-align: center">关于我们</h4>
                                <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                    <li>关于悠 U</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</li>
                                    <br>
                                    <li>服务协议</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游记协议</li>
                                    <br>
                                    <li>达人协议</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</li>
                                    <br>
                                    <li>网络信息侵权通知指引</li>
                                    <br>
                                    <li>网站地图</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商业合作</li>
                                    <br>
                                    <li style="color: bisque">&nbsp;&nbsp;&nbsp;加入我们</li>

                                </ul>
                            </div>
                        </li>
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                <h4 style="text-align: center">帮助中心</h4>
                                <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                    <li>新手上路</li>
                                    <br>
                                    <li style="color: bisque">意见反馈</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;常见问题</li>
                                    <br>
                                    <li style="color: bisque">帮助中心</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;旅行工具</li>
                                    <br>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <br><br>
                <hr>
                <div style="color: rgb(177, 177, 177);margin-top: 20px;margin-left: 150px;font-size: 12px">
                    <div style="float: left;"><img src="${path}/imgs/index/logo.jpg" width="60px" height="40px"
                                                   style="opacity: 0.7;border-radius: 80px;">
                    </div>
                    <div style="float: left;margin: 10px 5px;font-family: '楷体';font-size:18px">悠 U</div>
                    <div style="float: left;;margin-top: 10px;margin-left: 30px">© 2019 悠U
                        版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经营许可&nbsp;&nbsp;&nbsp;营业执照
                    </div>
                    <div style="clear: both;margin-left: 130px;margin-bottom: 100px">
                        悠U不是旅行社,也不是代理商,我们只提供一些免费、客观、公正
                        、计费的攻略指南,以及一些业余的引路人
                        对外部网站概不负责
                    </div>

                </div>
            </div>
            <div
                    style="float: right;width: 40px;height: 50px;margin-right: 10px;background-color: aliceblue;text-align: center">
                <a href="#top" style="color: rgb(177, 177, 177)"><br>Top&nbsp;↑</a>
            </div>
        </nav>

    </div>
</div>


<%--<script src="${path}/plugins/jquery/jquery.min.js"></script>--%>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<%--七牛云--%>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="${path}/js/edit/ajaxfileupload.js"></script>

<script>


    function insertm() {
        var address = document.getElementById("address-btn").value;
        var phone = document.getElementById("phoneNumber").value;
        var profile = document.getElementById("profile").value;
        var photo = document.getElementById('photo').src


        var phoneFlag=  document.getElementById("phoneFlag").value;
        var codeFlag=  document.getElementById("codeFlag").value;
        var yanzhengFlag=  document.getElementById("yanzhengFlag").value;
        var emailFlag=  document.getElementById("emailFlag").value;



        if (null != phoneFlag && null != emailFlag && null != codeFlag && null != yanzhengFlag &&
            phoneFlag.length > 0 && emailFlag.length > 0 && codeFlag.length > 0 && yanzhengFlag.length > 0 &&
            phoneFlag == 'false' && emailFlag == 'true' && codeFlag == 'true' && yanzhengFlag == 'true') {

            $.post('${path}/insertGuide', {phone: phone, address: address, profile: profile,photo:photo},function () {
                <%--$.get('${path}/guide/index')--%>
                window.location='${path}/guide/index';

            });

        }
    }

    function checkPhone(obj) {

        var phone = obj.value;
        var re = new RegExp("^1[3|4|5|8][0-9]\\d{4,8}$");
        if (null != phone && phone.length > 0) {
            if (!re.test(phone)) {
                $("#phones").html("手机格式输入不正确!");
                document.getElementById("phoneFlag").value = 'false';
            } else {
                $.get('${path}/checkphone', {phone: phone}, function (data) {
                    if (data.flag == false) {
                        $("#phones").html("");
                        document.getElementById("phoneFlag").value = 'false';

                    } else {
                        $("#phones").html("该手机号还未注册为用户");
                        document.getElementById("phoneFlag").value = 'true';


                    }
                })
            }
        } else {
            $("#phones").html("请输入手机号!")
            document.getElementById("phoneFlag").value = 'true';
        }
    }


    //邮箱验证
    function checkemail(obj) {
        var emails = obj.value;
        var re = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");

        if (null != emails && emails.length > 0) {
            if (!re.test(emails)) {
                $("#emails").text("请输入正确的邮箱格式");
                document.getElementById("emailFlag").value = 'false';
            } else {
                $("#emails").text("");
                document.getElementById("emailFlag").value = 'true';
            }
            return;
        } else {
            $("#emails").text("请输入邮箱");
            document.getElementById("emailFlag").value = 'false';
        }
    }

    function sendcode() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var email = document.getElementById("email").value;
        $.post('${path}/sendcode', {phone: phoneNumber, email: email});

    }

    function checkcode() {
        var Code = document.getElementById("idcode-btn").value;
        var phone = document.getElementById("phoneNumber").value;

        $.get('${path}/checkcode', {verCode: Code, phone: phone}, function (data) {
            if (data.flag == false) {
                $("#codes").html("验证码错误");
                document.getElementById("codeFlag").value = 'false';

            } else {
                $("#codes").html("");
                document.getElementById("codeFlag").value = 'true';


            }
        })

    }


    $('#myfile').change(function () {
        alert("woshitu")
        $("#imgform").ajaxSubmit({
            url: "${path}/upload",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                document.getElementById("phtot_url").value = data.imgUrl;
                console.log(data.imgUrl);
                console.log(typeof data.imgUrl);
                var ele = "<img src=\"\" style='max-width: 100px;max-height: 100px' id='photo'/>"
                $("#preview").append(ele);//编程一个jquery的对象
                $("#preview").find("img").attr("src", data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值


            },
            error: function (data) {
                alert(data);
            }
        })
    })

    $('#myfile2').change(function () {
        $("#imgform2").ajaxSubmit({
            url: "${path}/addUser",
            method: 'POST',
            datType: 'json',

            success: function (data) {

                console.log(data.imgUrl);

                console.log(data.path);
                var ele = "<img src='/uyou' style='max-width: 100px;max-height: 100px'/>"
                $("#preview2").append(ele);//编程一个jquery的对象
                $("#preview2").find("img").attr("src", data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值

                var userId = document.getElementById("userId").value;
                alert(userId)
                $.post('${path}/verified', {paths: data.path, userId: userId}, function (data) {
                    if (data.flag == false) {
                        console.log(data.message)

                        $("#yanzheng").html("图片格式错误或该用户已经实名认证,请重新上传");
                        document.getElementById("yanzhengFlag").value = 'false';

                    } else {
                        console.log(data.message)
                        console.log(data.flag)
                        $("#yanzheng").html("");
                        document.getElementById("yanzhengFlag").value = 'true';
                        console.log(data.flag)


                    }
                });
            },
            error: function (data) {
                alert(data);
            }
        })
    })


</script>


</body>

</html>